<div class="dataTable">
  <div class="title">{{'DataManagement.IntersectionCongestionReport.IntersectionCongestionReport' | translate}}</div>
  <div class="report_filter" nz-row>
      <div style="display: flex;align-items: center" nz-col >
          <div style="font-weight: bold;font-size:14px" class="filterName">{{'DataManagement.IntersectionCongestionReport.Site' | translate}}
          </div>
          <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" id="siteFocus" style="width: 2rem" nzAllowClear [(ngModel)]="siteSelect"
            (ngModelChange)='siteSearch($event)' [nzDropdownMatchSelectWidth]="false">
            <nz-option *ngFor="let option of siteOptions" [nzValue]="option" [nzLabel]="option.name">
            </nz-option>
          </nz-select>
        </div>
    <div style="display: flex;align-items: center" nz-col >
      <div style="font-weight: bold;font-size:14px" class="filterName">
        {{'DataManagement.IntersectionCongestionReport.DetectorRoad' | translate}}</div>
      <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" style="width: 2rem" nzAllowClear [(ngModel)]="roadSelect"
        (ngModelChange)='roadSearch()' nzMode="multiple" [nzDropdownMatchSelectWidth]="false" [nzMaxTagCount] = "roadSelect?.length > 1? 0 : 1">
        <nz-option *ngFor="let option of roadOptions" [nzValue]="option" [nzLabel]="option.name">
        </nz-option>
      </nz-select>
      <!-- <span nz-col nzSpan="2">
          <i class="iconfont icon-dingwei" style="cursor: pointer"></i>
        </span> -->
    </div>
    <div style="display: flex;align-items: center" nz-col >
      <div style="font-weight: bold;font-size:14px" class="filterName">
        {{'DataManagement.IntersectionCongestionReport.TimeRange' | translate}}</div>
      <!-- <nz-range-picker nzFormat="yyyy-MM-dd" nzSize="default"
        [(ngModel)]="dateRange" (nzOnOk)="onOk($event)" (ngModelChange)="onChange($event)"></nz-range-picker>
        <nz-time-picker nzPlaceHolder='Start Time' style="margin: 0 0.2rem" [(ngModel)]="startTime" nzFormat="HH:mm" (ngModelChange)='startTimeSearch()'></nz-time-picker>
        <nz-time-picker nzPlaceHolder='End Time' [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'></nz-time-picker> -->
      <nz-range-picker
        [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"
        (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate" [nzDisabledTime]="disabledRangeTime" [nzFormat]="'yyyy/MM/dd'">
      </nz-range-picker>
    </div>
    
  </div>
  <div class="report_filter second-line" nz-row>
    <div style="display: flex;align-items: center" nz-col >
      <div style="font-weight: bold;font-size:14px" class="filterName">
        {{'DataManagement.IntersectionCongestionReport.Include' | translate}}</div>
      <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" style="width: 2rem" nzAllowClear [(ngModel)]="includeSelect"
        (ngModelChange)='includeSearch()' [nzDropdownMatchSelectWidth]="false">
        <nz-option *ngFor="let option of includeOptions" [nzValue]="option.id" [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
        </nz-option>
      </nz-select>
    </div>
    <div style="display: flex;align-items: center" nz-col >
      <div style="font-weight: bold;font-size:14px" class="filterName">
        {{'DataManagement.IntersectionCongestionReport.Interval' | translate}}</div>
      <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" [nzDropdownMatchSelectWidth]="false" style="width: 2rem" nzAllowClear [(ngModel)]="intervalSelect"
        (ngModelChange)='intervalSearch()'>
        <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.name" [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
        </nz-option>
      </nz-select>
    </div>
    

    <div nz-col   class="search-box">

  

      <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search" nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}</button>
    </div>
  </div>
  <div class="picture" *ngIf="isTableShow">
    <img style="width: 550px; height: 200px;" src="../../../../content/images/road_test_img.jpg" alt="">
  </div>
  <div class="report" *ngIf="isTableShow">
    <div class="report_data">
      <div class="report_title">
        {{'DataManagement.IntersectionCongestionReport.CongestionTime' | translate}}
      </div>
      <div style="width: 100%; height: 300px;" echarts [options]="options" [merge]="updateOptions"></div>
    </div>
  </div>
</div>